import { doQueryQaList } from "@/services/knowledgemanagement";
import UserSession from "@/UserSession";
import { Button, Form, Input, Modal, Select, Table } from "antd";
import moment from "moment";
import React from "react";
import { formatMessage } from 'umi-plugin-react/locale';
const EditingKnowledge = React.lazy(() => import("@/pages/KnowledgeManagement/Overview/EditingKnowledge/editingKnowledge"));
import styles from "./index.less"

class QueryQaModal extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      visible: false,
      list: [],
      loading: false,
      current: 1,
      size: 10,
      total: 0,
      baseId: "",
      categoryId: '',
      qaId: ""
    }
  }

  componentDidMount() {
    if (this.props.onRef) {
      this.props.onRef(this)
    }
  }

  initOpenModal = () => {
    this.setState({ visible: true }, () => this.getDataList())
  }

  getDataList = () => {
    this.setState({ loading: true }, async () => {
      const { current, size } = this.state;
      const formInfo = this.props.form.getFieldsValue();
      let obj = { ...formInfo, current, size };
      const res = await doQueryQaList(obj);
      this.setState({ list: res.records, total: res.total, loading: false });
    })
  }

  cancelQueryQaModal = () => {
    this.setState({ visible: false })
  }

  queryByCondition = (current, size) => {
    this.setState({ current, size }, () => this.getDataList())
  }

  routerToDetail = (row) => {
    const { history, location } = this.props;
    let url = '';
    let queryObj = {};
    let params = {};

    if (row.type == 1) {
      this.setState({ categoryId: row.categoryId, baseId: row.rootCategoryId, qaId: row.id }, () => {
        this.EditingKnowledge.showEditDrawer({ id: row.id, categoryId: row.categoryId }, null, row.categoryId);
      })
    };
    if (row.type == 2) {
      url = "/knowledgeDesign/myKnowledge/" + row.rootCategoryId + "/graph/edit";
      queryObj = {
        id: row.atlasId,
        name: row.categoryName
      }
    };
    if (row.type == 3) {
      url = "/knowledgeDesign/myKnowledge/" + row.rootCategoryId + "/dialog/add";
      queryObj = {
        id: row.id,
        name: row.categoryName,
        pathId: row.rootCategoryId
      }
    };
    this.reqRef = requestAnimationFrame(() => {
      history.push({ pathname: url, query: queryObj, params });
    });
  }

  afterSave = () => {
    this.getDataList()
  }

  render() {
    const { visible, list, total, current, size, loading, baseId, categoryId } = this.state;
    const { form: { getFieldDecorator } } = this.props
    const columns = [
      {
        title: formatMessage({ id: 'systemKnowledgeBase.standardQuestion' }),
        dataIndex: 'question',
        width: 200,
      },
      {
        title: formatMessage({ id: 'systemKnowledgeBase.knowledgeBase' }),
        dataIndex: 'categoryBaseName',
        width: 100,
      },
      {
        title: formatMessage({ id: 'systemKnowledgeBase.knowledgeType' }),
        dataIndex: 'type',
        width: 100,
        render: type => {
          if (type == 1) {
            return formatMessage({ id: 'systemKnowledgeBase.qaKnowledge' })
          };
          if (type == 2) {
            return formatMessage({ id: 'systemKnowledgeBase.mapKnowledge' })
          };
          if (type == 3) {
            return formatMessage({ id: 'systemKnowledgeBase.multiturnKnowledge' })
          }
        }
      },
      {
        title: formatMessage({ id: 'systemKnowledgeBase.categoryPath' }),
        dataIndex: 'categoryPath',
        width: 150,
      },
      {
        title: formatMessage({ id: 'systemKnowledgeBase.updateTime' }),
        dataIndex: 'updateTime',
        width: 150,
        render: (time) => {
          return time ? moment(time).format("YYYY-MM-DD HH:mm:ss") : ''
        }
      },
      {
        title: formatMessage({ id: 'systemKnowledgeBase.operation' }),
        width: 100,
        align: 'center',
        render: (txt, row) => {
          return <Button size="small" type="link" onClick={() => this.routerToDetail(row)}>{formatMessage({ id: 'systemKnowledgeBase.edit' })}</Button>
        }
      }
    ];

    return (
      <div>
        <Modal wrapClassName="queryQa" title={formatMessage({ id: 'systemKnowledgeBase.queryKnowledge' })} visible={visible} onCancel={this.cancelQueryQaModal} footer={null} width={'70vw'} destroyOnClose>
          <Form layout="inline" style={{ marginBottom: 24 }}>
            <Form.Item>
              {
                getFieldDecorator('searchType', { initialValue: '1' })(
                  <Select style={{ width: 150 }}>
                    <Select.Option value="1">{formatMessage({ id: 'systemKnowledgeBase.searchQuestion' })}</Select.Option>
                    <Select.Option value="2">{formatMessage({ id: 'systemKnowledgeBase.searchAnswer' })}</Select.Option>
                  </Select>
                )
              }
            </Form.Item>
            <Form.Item>
              {
                getFieldDecorator('search', { initialValue: '' })(
                  <Input.Search placeholder={formatMessage({ id: 'systemKnowledgeBase.enterSearchContent' })} onSearch={() => this.queryByCondition(1)} />
                )
              }
            </Form.Item>
            <Form.Item>
              <Button type="primary" onClick={() => this.queryByCondition(1)}>{formatMessage({ id: 'systemKnowledgeBase.query' })}</Button>
            </Form.Item>
          </Form>
          <Table
            columns={columns}
            dataSource={list}
            loading={loading}
            pagination={{
              current,
              pageSize: size,
              showQuickJumper: true,
              showSizeChanger: true,
              onChange: this.queryByCondition,
              onShowSizeChange: this.queryByCondition,
              total,
            }}
            rowKey={(row, index) => index}
            scroll={{ y: 500 }}
          />
        </Modal>
        <EditingKnowledge
          onRef={(ref) => (this.EditingKnowledge = ref)}
          refreshList={this.afterSave}
          categoryId={categoryId}
          authority={2}
          pathId={baseId}
          urlPrefix={UserSession.isSystemKnowledge() ? 1 : null}
        />
      </div>
    )
  }
}

export default Form.create()(QueryQaModal)